<template>
	<positionContainerVue :show.sync="newShow" tBStyle="display: flex;justify-content: center;" tStyle="transform: translateX(0rpx)" @changeShow="changeShow">
		<template #slot-view>
			<view class="label">
				<view class="min-age">
					{{ start || '请选择' }}
				</view>
				<view class="text">
					至
				</view>
				<view class="max-age">
					{{ end || '请选择' }}
				</view>
				<uni-icons class="icon" :class="{open: newShow,}" type="right" />
			</view>
		</template>
		<template #position-view>
			<view class="select-picker-box">
				<customizePickerVue style="width: 100%;" :pickerValue.sync="pickerVal" :picker-column="setPickerColumn" centerSymbol="至" @bindChange="changePicker" />
			</view>
		</template>
	</positionContainerVue>
</template>

<script>
	import customizePickerVue from '../../../components/customize-picker/customize-picker.vue';
	import positionContainerVue from '../../../components/position-container/position-container.vue';

	export default {
		props: {
			start: String,
			end: String,
			show: {
				type: Boolean
			},
		},
		components: {
			positionContainerVue,
			customizePickerVue,
		},
		data() {
			return {
				newShow: false,
				min: '18岁',
				max: '50岁',
				newShow: false,
				pickerVal: [0,0],
				pickerColumn: [
					{
						suffix: '',
						key: 'min',
						list: [],
					},
					{
						suffix: '',
						key: 'max',
						list: [],
					},
				]
			};
		},
		computed: {
			setPickerColumn(){
				const list = this.generateSequence(48,18);
				const arr = this.pickerColumn.map(v => {
					v.list = list.map(v => `${v}岁`);
					return v;
				});
				return arr;
			},
		},
		watch: {
			show(val){
				if (this.newShow !== val) this.newShow = val;
			},
			start: {
				handler(val){
					this.min = `${val.slice(0,2)}岁`;
				},
				immediate: !0,
			},
			end: {
				handler(val){
					this.max = `${val.slice(0,2)}岁`;
				},
				immediate: !0,
			},
		},
		mounted() {
			this.initPickerValue();
		},
		methods: {
			changeShow(){
				this.$emit('update:show',this.newShow);
				this.$emit('changeShow', 'workingHours');
			},
			generateSequence(count,initial = 0) {
				const init = Number(initial);
				return [...Array(count).keys()].map(i => {
					const num = i + init;
					const str = num < 10 ? `0${num}` : `${num}`;
					return str;
				});
			},
            initPickerValue(){
                const lists = [];
                this.pickerColumn.forEach((v,i) => {
                    const index = v.list.findIndex(item => String(item) === String(this[v.key]));
                    lists.push(index > -1 ? index : 0);
                })
				console.log(lists);
                this.pickerVal = lists;
            },
			changePicker(){
				if (!this.newShow) return false;
				const temVal = [];
				this.pickerVal.forEach((v, i) => {
					const str = this.setPickerColumn[i].list[v];
					temVal.push(str);
				});
				console.log(temVal);
				// const sp = Number(temVal[0].slice(0,2));
				// const ep = Number(temVal[1].slice(0,2));
				// let tips;
				// if (sp > ep) tips = '最小年龄必须小于最大年龄';
				// if (tips) {
				// 	uni.showToast({
				// 		title: tips,
				// 		icon: 'none',
				// 		mask: true,
				// 	})
				// 	return false;
				// }
				const [start, end] = temVal;
				[this.min,this.max] = temVal;

				console.log({start,end});
				this.$emit('update:start',start);
				this.$emit('update:end',end);
				this.$emit('endChange',{start,end});
			},
		}
	}
</script>

<style lang="less" scoped>
.label {
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 0 60rpx;
	position: relative;
	width: 412rpx;
	.text {
		margin: 0 20rpx;
		color: #999999;
	}
	.icon {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 20rpx;
		transition: all 0.5s;
		&.open {
			transform: translateY(-50%) rotate(-90deg);
			
		}
	}
}
.select-picker-box {
	width: 368rpx;
	display: flex;
	align-items: center;
	::v-deep {
		.picker_item {
			font-size: 36rpx;
		}
	}
}
</style>
